<template>
  <div id="div-dashboard-A100411">
    <el-row :gutter="15">
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card">
          <span>网关总数/在线数量</span>
          <span><b>5</b> 个</span>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card">
          <span>断路器总数/在线数量</span>
          <span>
            <b>1</b> 人/<b>1</b> 人
          </span>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card">
          <span>接触器总数/在线数量</span>
          <span>
            <b>{{ detailData.userCount }}</b> 人/<b>{{ detailData.activeUserCount }}</b> 人
          </span>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card">
          <span>传感器总数/在线数量</span>
          <span>
            <b>{{ detailData.customerCount }}</b> 人/<b>{{ detailData.activeCustomerCount }}</b> 人
          </span>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" style="margin-bottom: 40px;">
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card">
          <span>面板总数/在线数量</span>
          <span>
            <b>{{ detailData.agentCount }}</b> 家
          </span>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card">
          <span>接触器转接板/在线数量</span>
          <span>
            <b>{{ detailData.customerCount }}</b> 人/<b>{{ detailData.activeCustomerCount }}</b> 人
          </span>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card">
          <span>传感器转接板/在线数量</span>
          <span>
            <b>{{ detailData.customerCount }}</b> 人/<b>{{ detailData.activeCustomerCount }}</b> 人
          </span>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card" style="height: 300px;">
          <div class="echarts1" :style="{ width: '100%', height: '36vh' }"></div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card" style="height: 300px;">
          <div class="echarts2" :style="{ width: '100%', height: '36vh' }"></div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card" style="height: 300px;">
          <div class="echarts3" :style="{ width: '100%', height: '36vh' }"></div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <el-card class="box-card" style="height: 300px;">
          <div class="echarts4" :style="{ width: '100%', height: '36vh' }"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from 'vue'
import echarts from 'echarts'

export default {
  name: 'dashboard-A100411',
  data () {
    return {
      detailData: {},
      option1: {
        title: {
          text: '报警统计',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['管理服务', '自动作业服务', '日志服务', '智慧用电服务', '智能家居服务']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '管理服务' },
              { value: 310, name: '自动作业服务' },
              { value: 234, name: '日志服务' },
              { value: 135, name: '智慧用电服务' },
              { value: 1548, name: '智能家居服务' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      option2: {
        title: {
          text: '传感器联动统计',
          subtext: '',
          x: 'center'
        },
        xAxis: {
          axisLabel: {
            show: true,
            interval: 0 // x坐标标签全部显示
          },
          type: 'category',
          data: ['管理员', '代理商', '总公司', '分公司', '项目', '员工']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      },
      option3: {
        title: {
          text: '网关上下线统计',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['在线人数', '离线人数']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 1, name: '在线人数' }, { value: 1, name: '离线人数' }]
          }
        ]
      },
      option4: {
        title: {
          text: '设备开关统计',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['在线人数', '离线人数']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 1, name: '在线人数' }, { value: 1, name: '离线人数' }]
          }
        ]
      }
    }
  },
  created: function () {
    this.getDetail()
  },
  mounted: function () {
    let myChart1 = echarts.init(document.querySelector('.echarts1'))
    myChart1.setOption(this.option1)

    let myChart2 = echarts.init(document.querySelector('.echarts2'))
    myChart2.setOption(this.option2)

    let myChart3 = echarts.init(document.querySelector('.echarts3'))
    myChart3.setOption(this.option3)

    let myChart4 = echarts.init(document.querySelector('.echarts4'))
    myChart4.setOption(this.option4)
  },
  methods: {
    getDetail: function () {
      Vue.$ajax({
        method: 'get',
        url: Vue.$adminServerURL + '/web/v1/DashboardController/detailForA100401'
      }).then(res => {
        if (res.data.flag === 'SUCCESS') {
          this.detailData = res.data.obj
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    }
  }
}
</script>
<style>
#div-dashboard-A100411 .el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0px;
  }
}
#div-dashboard-A100411 .box-card {
  height: 100px;
  padding-top: 10px;
}
#div-dashboard-A100411 .box-card span:first-child {
  color: #656565;
  border-left: 5px solid #00b83f;
  padding-left: 5px;
}
#div-dashboard-A100411 .box-card span:last-child {
  padding-left: 15px;
  font-size: 18px;
  color: #0078ff;
}
</style>
